NUBIE BANGET RESPONSIVE BLOGGER TEMPLATE

Getting Started

Theme Info

Created: 04/12/2015

Nubie Banget is a Blogger template with Responsive layout and suited for all blog. It's design with simple color combination, clean and modern look, Fast, SEO Optimized, Valid HTML5, Valid CSS3, and has been built by using some of the most popular current design trends.

Features

  • Responsive
  • SEO Friendly
  • Google Testing Tool Validator
  • Dynamic Heading
  • Mobile Friendly
  • Mobile Friendly
  • High CTR
  • Responsive Ad Slot
  • Personal Blog
  • 2 Column
  • Light Base Theme Color
  • Breadcrumbs
  • Related Posts with Thumb
  • Search Box
  • Social Share Button
  • Responsive Dropdown Menu
  • Custom Subscribe Box Widget
  • Smooth Back to Top
  • Shortcodes

Beberapa artikel yang mungkin dapat membantu Anda.

Installation

  • 1. Log in ke Blogger dashboard dan buka Template > Edit HTML.
  • 2. Silahkan backup template lama Anda jika Anda memutuskan untuk menggunakannya lagi. Untuk melakukan ini, klik pada "download template lengkap" link dan simpan template.
  • 3. Kemudian, cari lokasi XML template yang baru saja Anda download dan tekan "Upload".

    • Customize Theme

    Silakan buka Blogger > Template > "Edit HTML"

    Cari dan ganti semua kode ini # dengan tulisan Anda.

    Main Navigation : 
    <nav class='main-nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url' title='About Us'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contact us'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' title='Our Sitemap'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a></li>
<li class='socialright'><a href='#' itemprop='url' rel='nofollow' target='_blank' title='Join Our Site'><span itemprop='name'><i class='fa fa-plus'/></span></a></li>
<li class='socialright'><a href='#' itemprop='url' rel='nofollow' target='_blank' title='Follow us on Google+'><span itemprop='name'><i class='fa fa-google-plus'/></span></a></li>
<li class='socialright'><a href='#' itemprop='url' rel='nofollow' target='_blank' title='Follow us on Facebook'><span itemprop='name'><i class='fa fa-facebook'/></span></a></li>
<li class='socialright'><a href='#' itemprop='url' rel='nofollow' target='_blank' title='Follow us on Twitter'><span itemprop='name'><i class='fa fa-twitter'/></span></a></li>
<li class='menu' title='Menu'/>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>

    SEO Meta Tag

    Buka Blogger, Template, "Edit HTML"

    Cari dan ganti semua tulisan xxxxx dengan keterangan blog Anda (Jika tidak diperlukan, hapus saja). 

    <meta content='xxxxx' name='keywords'/>
<link href='https://plus.google.com/xxxxx/posts' rel='publisher'/>
<link href='https://plus.google.com/xxxxx/about' rel='author'/>
<link href='https://plus.google.com/xxxxx' rel='me'/>
<meta content='xxxxx' name='google-site-verification'/>
<meta content='xxxxx' name='msvalidate.01'/>
<meta content='xxxxx' name='alexaVerifyID'/>
<meta content='xxxxx' name='Author'/>
<meta content='xxxxx' property='og:description'/>
<meta content='xxxxx' property='fb:app_id'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='xxxxx' name='twitter:site'/>
<meta content='xxxxx' name='twitter:creator'/>

    Post Page

    Subscribe Box

    Buka editor template, kemudian cari kode di bawah ini dan ganti NubieBanget dengan nama feedburner blog Anda.

    <div id='subscribe-box'>
<h4>Berlangganan</h4>
<p>Suka dengan artikel di atas? Silakan berlangganan gratis via email</p>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NubieBanget&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}' onfocus='if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Alamat Email'/>
<input name='uri' type='hidden' value='NubieBanget'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>

    Widgets

    Sitemap

    Buat post di halaman statis, kemudian terapkan kode di bawah ini pada tab HTML.

    <div id="bp_toc">
Loading TOC. Please wait....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments,#Label1,#FollowByEmail1 {display:none;}
#HTML3 {visibility:hidden;}
/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:&#39;Roboto&#39;;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#bp_toc a{text-align:left;float:none;font-size:90%;padding:0}
</style>
    Contact Form

    Buat post di halaman statis > kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di halaman ini.

    <form name="contact-form">
<span> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<span> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<span> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
    Ad Banner HTML

    Di Tata Letak tambah widget baru, Kemudian terapkan kode di bawah ini.

    Banner 728x90.

    <div class='kotak_iklan3'>
<a href='#' target='_blank' title='ADS-DESCRIPTION'><img alt='iklan banner' height='90' src='IMAGE-URL' title='ADS-DESCRIPTION' width='728'/></a>
</div>

    Banner 160x600.

    <div class='kotak_iklan3'>
<a href='#' target='_blank' title='ADS-DESCRIPTION'><img alt='iklan banner' height='600' src='IMAGE-URL' title='ADS-DESCRIPTION' width='160'/></a>
</div>

    ShortCodes

    Drop Caps 
    <span class="first-letter">Your First Letter here</span>
    Blockquote

    Untuk membuat Blockquote cukup pilih semua teks yang Anda ingin menjadi Kutipan dan klik pada icon Kutipan dari posting blog panel editor teks.

    Buttons

    Menambahkan demo dan download button.

    <div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>
    Memasang Table di postingan 
    <table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table>

    Perbaikan

    Mobile Responsive

    Nonaktifkan versi mobile pada template ini, silakan klik Template > Tombol Gear > Pilih Tidak.

    Oke cukup sekian, jika ada kesulitan lain jangan segan untuk bertanya lewat formulir kontak blog Arlina Design. Terima kasih.


    nubie banget - www.arlinadzgn.com

    Top